<template>

  <div class='listOfGoods'
       v-if='shoppingListData'>
    <block v-for='item in shoppingListData'
           :key='item'>
      <div class='visual-wrap'>
        <div class='fixed'>
          <div class='check-all'>
            <div class='lf-nt check'>
              <!-- <div class=''
                   @click="selectCheck(item,'-1')">
                <icon :type="item.isSelect?'success_no_circle':''"
                      :size="store.check.size"
                      :color="store.check.color" />
              </div>
              全选 -->

              <span :style="{paddingLeft:'10px'}">卡号：[{{item.title.KH_bianHao}}]{{item.title.KHLeiXing}}</span>
            </div>
            <div class='rt-zp'
                 v-if='item.title.KHLeiXing!=undefined'
                 @click="goTo('/pages/chooseAnOffer/bzGoods?typeId=' + item.title.KH_LeiXing_ID+'&inShopping=true')">
              选择标准商品

            </div>
            <div class='rt-zp'
                 @click="goTo('/pages/chooseAnOffer/giftOfGoods?showAll=false')">
              选择赠品

            </div>
          </div>
        </div>

        <ul class='goods-list'>
          <!-- 普通商品和赠品 -->
          <i-swipeout i-class="i-swipeout-demo-item"
                      v-for="(items,indexs) in item.arr"
                      :key='indexs'
                      operateWidth="120">
            <view slot="content">
              <li>
                <div class='check'>
                  <div @click='selectCheck(item,items)'>
                    <icon :type="items.isSelect?'success_no_circle':''"
                          :size="store.check.size"
                          :color="store.check.color" />
                  </div>
                </div>
                <div class='content'>
                  <div class='lf-img'>
                    <img :src="items.SP_Picture"
                         mode="widthFix"
                         alt="">
                  </div>
                  <div class='rt-goodsInfo'>
                    <div>[{{items.HuoHao}}]{{items.SPMingcheng}}</div>
                    <!-- <div>
                <span>起送量>=30桶</span>
              </div> -->
                    <div class='number'>
                      <span v-if='items.BJ_price>0'>￥{{items.BJ_price}}</span>
                      <span v-else>赠品</span>
                      <div class='operate'>
                        <div @click="addSubtract(items,'-')">－</div>
                        <input type="number"
                               :value='items.number'
                               @input="entryInput($event,items)"
                               maxlength='5'>
                        <div @click="addSubtract(items,'+')">＋</div>
                      </div>

                    </div>
                  </div>
                </div>
              </li>
            </view>
            <view slot="button"
                  class="demo-button-group"
                  @click='handleClickItem(items)'>
              <view class="demo-button">删除</view>
            </view>
          </i-swipeout>
          <!-- 标准商品 -->
          <i-swipeout i-class="i-swipeout-demo-item"
                      v-for="(items,indexs) in bzGoodsListData"
                      :key='indexs'
                      operateWidth="120">
            <view slot="content">
              <li>
                <div class='check'>
                  <div @click='selectCheck(item,items)'>
                    <icon :type="items.isSelect?'success_no_circle':''"
                          :size="store.check.size"
                          :color="store.check.color" />
                  </div>
                </div>
                <div class='content'>
                  <div class='lf-img'>
                    <img :src="items.Pic"
                         mode="widthFix"
                         alt="">
                  </div>
                  <div class='rt-goodsInfo'>
                    <div>[{{items.HuoHao}}]{{items.SPMingCheng}}</div>

                    <div class='number'>
                      <span v-if='items.SP_price>0'>￥{{items.SP_price}}</span>
                      <span v-else>0</span>
                      <div class='operate'>
                        <div @click="addSubtract(items,'-')">－</div>
                        <input type="number"
                               :value='items.number'
                               @input="entryInput($event,items)"
                               maxlength='5'>
                        <div @click="addSubtract(items,'+')">＋</div>
                      </div>

                    </div>
                  </div>
                </div>
              </li>
            </view>
            <view slot="button"
                  class="demo-button-group"
                  @click='handleClickItem(items,"bzGoods")'>
              <view class="demo-button">删除</view>
            </view>
          </i-swipeout>
        </ul>

      </div>
    </block>

    <div class='stone'></div>
    <div class='footer'>
      <!-- <div class='point-out'>配送要求：A类桶装水累计起送量要求>=30</div> -->
      <div class='aggregate '
           :class="[store.isIphoneX?'iphoneX-fixed-bottom':'']">
        <div>合计:
          <span>￥{{total}}</span>
        </div>
        <button :class="[isDisable?'disable':'']"
                @click="goToOrder">下一步</button>
      </div>
    </div>

  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      shoppingListData: null,
      bzGoodsListData: null,
      isDisable: false,
      total: 0

    }
  },

  components: {},

  computed: {
    store () {
      return this.$store.state
    }
  },
  onShow () {
    this.getShoppingList()
    this.btnConfirmColor()
  },
  onHide () {
    this.$wx.getStore('shoppingCart', this.shoppingListData)
    this.$wx.getStore('bzGoods', this.bzGoodsListData)
  },
  methods: {
    getShoppingList () {
      this.shoppingListData = this.$wx.getStore('shoppingCart')
      this.bzGoodsListData = this.$wx.getStore('bzGoods')

      this.calculatePrice()
    },
    /** 加减操作 */
    addSubtract (items, type) {
      if (type === '-' && items.number > 1) {
        items.number -= 1
      } else if (type === '+') {
        items.number += 1
      }
      if (items.settleStyle === '赠品') {
        if (items.ZP_leftQuantity < items.number) {
          items.number = items.ZP_leftQuantity
          this.$wx.textToast(`最大购买量${items.ZP_leftQuantity}${items.SPDanWei}`)
        }
      }
      this.calculatePrice()
    },
    entryInput (e, items) {
      items.number = Number(e.target.value)
      this.calculatePrice()
    },
    /** 计算金额 */
    calculatePrice () {
      let shoppingListData = this.shoppingListData
      let bzGoodsListData = this.bzGoodsListData
      let total = 0
      for (let key of shoppingListData[0].arr) {
        if (key.isSelect) {
          total += Number((key.BJ_price * key.number).toFixed(2))
        }
      }
      for (let key of bzGoodsListData) {
        if (key.isSelect) {
          total += Number((key.SP_price * key.number).toFixed(2))
        }
      }
      this.total = total.toFixed(2)
      // 赠品
      // this.giftNumber()
    },

    selectCheck (item, items) {
      items.isSelect = !items.isSelect
      this.btnConfirmColor()
      this.calculatePrice()
    },
    btnConfirmColor () {
      let shoppingListData = this.shoppingListData
      let bzGoodsListData = this.bzGoodsListData
      this.isDisable = true
      for (let key of shoppingListData[0].arr) {
        if (key.isSelect) {
          this.isDisable = false
          return
        }
      }
      for (let key of bzGoodsListData) {
        if (key.isSelect) {
          this.isDisable = false
          return
        }
      }
    },
    goToOrder (url) {
      if (this.isDisable) { return false }
      let groupingData = this.shoppingListData
      let bzGoodsListData = this.bzGoodsListData
      let parame = {
        title: groupingData[0].title,
        arr: [],
        bzArr: [],
        isSelect: true
      }
      for (let key of groupingData) {
        for (let keys of key.arr) {
          if (keys.isSelect) {
            if (keys.number === 0 || keys.number === '') {
              this.$wx.textToast('购买数量不能小于1件')
              return
            } else if (keys.settleStyle === '赠品' && keys.ZP_leftQuantity < keys.number) {
              this.$wx.textToast(`[${keys.HuoHao}]${keys.SPMingcheng}最大购买${keys.ZP_leftQuantity}${keys.SPDanWei}`)
              return
            }

            parame.arr.push(keys)
          }
        }
      }
      for (let key of bzGoodsListData) {
        if (key.isSelect) {
          parame.bzArr.push(key)
        }
      }
      this.setAddress(null)
      this.$wx.getStore('confirmOrder', [parame])
      this.$wx.navigator(('/pages/chooseAnOffer/confirmOrder'))
    },
    handleClickItem (item, inThe) {
      console.log(item)
      let index = 0
      // 删除标准商品
      if (inThe === 'bzGoods') {
        let bzGoodsListData = this.bzGoodsListData

        for (let key of bzGoodsListData) {
          if (key.HuoHao === item.HuoHao && key.SP_ID === item.SP_ID) {
            bzGoodsListData.splice(index, 1)
            break
          }
          index += 1
        }
        this.$wx.getStore('bzGoods', bzGoodsListData)
        this.bzGoodsListData = bzGoodsListData
      } else {
        let shoppingCart = this.shoppingListData

        for (let key of shoppingCart[0].arr) {
          if (key.HuoHao === item.HuoHao && key.ZHID === item.ZHID) {
            shoppingCart[0].arr.splice(index, 1)

            break
          }
          index += 1
        }
        this.$wx.getStore('shoppingCart', shoppingCart)
        this.shoppingListData = shoppingCart
      }

      this.calculatePrice()
    },
    ...mapMutations({
      setAddress: 'SET_ADDRESS'

    }),

    goTo (url) {
      this.$wx.navigator(url)
    }
  }
}
</script>
<style lang='scss' scoped>
@import '@/pages/chooseAnOffer/list.scss';

.listOfGoods {
  .visual-wrap {
    background: #fff;
    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #fff;
      z-index: 1;
      .check-all {
        @include fjc;
        @include border-bottom($lineColor);
        height: 88px;
        padding: 0 30px;
        .lf-nt {
          @include ifjc;
          @include color666;
          @include fontSize(28);
          > div {
            margin-right: 10px;
          }
        }
        .rt-zp {
          color: $primaryColor;
          @include fontSize(28);
        }
      }
    }
    .goods-list {
      padding-top: 88px;
    }
  }.rt-goodsInfo{
    padding-right:0!important;
  }
}
 
</style>